<template>
    <div id="batch_modify">
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </div>
            <el-table
                :cell-class-name="addclass"
                :header-cell-style="{ background: '#F3F4F7 !important', color: '#2A2A2A' }"
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column width="auto" label="项目ID" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column width="auto" label="项目名称" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column width="350px" label="导入Excel" align="center">
                    <template slot-scope="scope">
                        <el-input placeholder="" style="height:auto" v-show="true" disabled v-model="form[scope.row.id]"></el-input>
                        <!-- <el-button size="mini" type="info" @click="handleImport">导入Excel</el-button> -->
                        <a href="javascript:void(0)" class="btn">
                            导入excel
                            <input
                                type="file"
                                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                id="file"
                                name="file"
                                @change="handleImport($event, scope.row.id)"
                            />
                        </a>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" @click="handleImplement(scope.$index, scope.row)">执行</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <p style="margin: 0; padding: 0;padding-left: 20px; margin-bottom: 20px;">修改日志</p>
            <el-table
                :header-cell-style="{ background: '#F3F4F7 !important', color: '#2A2A2A' }"
                :cell-class-name="addclass_2"
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column width="auto" label="日期" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column width="auto" label="项目名称" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column width="350px" label="创建用户" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>

                <el-table-column label="状态" width="350px" align="center">
                    <template slot-scope="scope">
                        <img
                            v-if="scope.row.status == 0"
                            style="width: 20px;height: 20px;"
                            src="@/assets/images/歌曲管理/u464.png"
                            alt=""
                        />
                        <img
                            v-else-if="scope.row.status == 1"
                            style="width: 20px;height: 20px;"
                            src="@/assets/images/歌曲管理/u468.png"
                            alt=""
                        />

                        <el-button type="primary" v-if="scope.row.status == 1" @click="handleImplement(scope.$index, scope.row)"
                            >重新上传表格</el-button
                        >
                    </template>
                </el-table-column>

                <el-table-column label="结果" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleImplement(scope.$index, scope.row)">
                            <!-- 查看 -->
                            {{ $t('m.seeBtn') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import NProgress from 'nprogress';
export default {
    name: 'BatchModify',
    data() {
        return {
            query: {},
            tableData: [
                {
                    id: 1,
                    name: '歌曲状态管理'
                },
                {
                    id: 2,
                    name: '专辑状态管理'
                },
                {
                    id: 3,
                    name: '修改付费类型'
                },
                {
                    id: 4,
                    name: '修改歌词'
                },
                {
                    id: 5,
                    name: '修改无损文件'
                }
            ],
            pageTotal: 0,
            form: {
                1: '',
                2: '',
                3: '',
                4: '',
                5: ''
            },
            idx: -1,
            id: -1
        };
    },
    activated() {
        // this.getData();
    },
    methods: {
        addclass({ row, column, rowIndex, columnIndex }) {
            // console.log(row, column, rowIndex, columnIndex);
            if (columnIndex === 2) {
                return 'addcss';
            } else {
                return '';
            }
        },
        addclass_2({ row, column, rowIndex, columnIndex }) {
            // console.log(row, column, rowIndex, columnIndex);
            if (columnIndex === 3) {
                return 'addcss_1';
            } else {
                return '';
            }
        },
        getData() {},
        handleAdd() {
            console.log('新增操作');
        },

        // 执行操作
        handleImplement(index, row) {
            this.$router.replace({
                path: '/album_3/info_2',
                query: {
                    id: '444'
                }
            });
        },
        // 导入Excel
        handleImport(e, id) {
            console.log(e, id);
            if (id == 1) {
                this.import('/batch/songStatus', e, id);
            } else if (id == 2) {
                this.import('/batch/albumStatus', e, id);
            } else if (id == 3) {
            } else if (id == 4) {
            } else if (id == 5) {
            }
        },
        async import(url, e, id) {
            try {
                NProgress.start();
                var event = e || window.event;
                var target = event.target || e.srcElement;
                var file = target.files[0];
                console.log(file);
                var formdata = new FormData();
                formdata.append('file', file);
                let { data: res } = await this.$http[2].post(url, formdata, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                console.log('响应数据', res);
                this.form[id] = file.name;
                target.value = null;
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                target.value = null;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        }
    }
};
</script>

<style lang="scss">
#batch_modify {
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
        td {
            padding: 0 !important;
            height: 45px;
            line-height: 45px;
        }
        th {
            padding: 0 !important;
            height: 45px;
            line-height: 45px;
        }
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .addcss {
        .cell {
            display: flex;
            justify-content: center;
            height: auto;
            .el-input {
                width: 200px;
                margin-right: 10px;
                .el-input__inner {
                    outline: none;
                    border: none;
                    border: 1px solid #999;
                    height: 30px;
                    font-size: 14px;
                    color: #333;
                }
            }
            .el-button {
                width: auto;
            }
        }
    }

    .addcss_1 {
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
            img {
            }
            .el-button {
                position: absolute;
                right: 30px;
                margin-left: 20px;
            }
        }
    }

    .btn {
        position: relative;
        display: inline-block;
        text-align: center;
        color: #fff;
        text-decoration: none;
        width: 80px;
        height: 32px;
        line-height: 32px;
        background: #409eff;
        border-radius: 3px;
        font-size: 12px;
        vertical-align: middle;
        margin-left: 10px;
        input[name='file'] {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
        }
    }
}
</style>
